<template>
	<div class="app-container">
		<!-- <div style="width: 99%;margin-bottom:10px">
      <el-card class="box-card">
        <div slot="header" class="clearfix"><span>订单状态</span></div>
        <div class="state-div">
          <div class="list-div">
            <div v-if="data.state == 0" class="row-active">
              <div class="state-name">买家下单</div>
              <div class="state-index">1</div>
              <div class="state-time">{{ data.createtime }}</div>
            </div>
            <div v-else-if="data.state == 1" class="row-active">
              <div class="state-name">买家下单</div>
              <div class="state-index">1</div>
              <div class="state-time">{{ data.createtime }}</div>
            </div>
            <div v-else-if="data.state == 2" class="row-active">
              <div class="state-name">买家下单</div>
              <div class="state-index">1</div>
              <div class="state-time">{{ data.createtime }}</div>
            </div>
            <div v-else-if="data.state == 3" class="row-active">
              <div class="state-name">买家下单</div>
              <div class="state-index">1</div>
              <div class="state-time">{{ data.createtime }}</div>
            </div>
            <div v-else-if="data.state == 4" class="row-active">
              <div class="state-name">买家下单</div>
              <div class="state-index">1</div>
              <div class="state-time">{{ data.createtime }}</div>
            </div>
            <div v-else-if="data.state == 6" class="row-active">
              <div class="state-name">买家下单</div>
              <div class="state-index">1</div>
              <div class="state-time">{{ data.createtime }}</div>
            </div>

            <div v-if="data.state == 0" class="row">
              <div class="state-name">买家付款</div>
              <div class="state-index">2</div>
              <div class="state-time">{{ data.pay_time }}</div>
            </div>
            <div v-else-if="data.state == 1" class="row-active">
              <div class="state-name">买家付款</div>
              <div class="state-index">2</div>
              <div class="state-time">{{ data.pay_time }}</div>
            </div>
            <div v-else-if="data.state == 2" class="row-active">
              <div class="state-name">买家付款</div>
              <div class="state-index">2</div>
              <div class="state-time">{{ data.pay_time }}</div>
            </div>
            <div v-else-if="data.state == 3" class="row-active">
              <div class="state-name">买家付款</div>
              <div class="state-index">2</div>
              <div class="state-time">{{ data.pay_time }}</div>
            </div>
            <div v-else-if="data.state == 4" class="row-active">
              <div class="state-name">买家付款</div>
              <div class="state-index">2</div>
              <div class="state-time">{{ data.pay_time }}</div>
            </div>
            <div v-else-if="data.state == 6" class="row-active">
              <div class="state-name">买家付款</div>
              <div class="state-index">2</div>
              <div class="state-time">{{ data.pay_time }}</div>
            </div>

            <div v-if="data.state == 0" class="row">
              <div class="state-name">商家发货</div>
              <div class="state-index">3</div>
              <div class="state-time" />
            </div>
            <div v-else-if="data.state == 1" class="row">
              <div class="state-name">商家发货</div>
              <div class="state-index">3</div>
              <div class="state-time" />
            </div>
            <div v-else-if="data.state == 2" class="row-active">
              <div class="state-name">商家发货</div>
              <div class="state-index">3</div>
              <div class="state-time" />
            </div>
            <div v-else-if="data.state == 3" class="row-active">
              <div class="state-name">商家发货</div>
              <div class="state-index">3</div>
              <div class="state-time" />
            </div>
            <div v-else-if="data.state == 4" class="row-active">
              <div class="state-name">已经退款</div>
              <div class="state-index">3</div>
              <div class="state-time" />
            </div>
            <div v-else-if="data.state == 6" class="row-active">
              <div class="state-name">申请退款</div>
              <div class="state-index">3</div>
              <div class="state-time" />
            </div>

            <div v-if="data.state == 0" class="row">
              <div class="state-name">订单完成</div>
              <div class="state-index">4</div>
              <div class="state-time" />
            </div>
            <div v-else-if="data.state == 1" class="row">
              <div class="state-name">订单完成</div>
              <div class="state-index">4</div>
              <div class="state-time" />
            </div>
            <div v-else-if="data.state == 2" class="row">
              <div class="state-name">订单完成</div>
              <div class="state-index">4</div>
              <div class="state-time" />
            </div>
            <div v-else-if="data.state == 3" class="row-active">
              <div class="state-name">订单完成</div>
              <div class="state-index">4</div>
              <div class="state-time" />
            </div>
            <div v-else-if="data.state == 4" class="row-active">
              <div class="state-name">订单关闭</div>
              <div class="state-index">4</div>
              <div class="state-time" />
            </div>
          </div>
          <div v-if="data && data.state != 5" class="xu-xian" />
        </div>
      </el-card>
    </div> -->
		<div style="margin-bottom: 10px;">
			<el-button type="primary" icon="el-icon-back" size="small" @click="back">返回上一页</el-button>
		</div>
		<div class="" style="display: flex;">
			<div style="width: 49%;">
				<el-card class="box-card" style="height: 600px;">
					<div slot="header" class="clearfix"><span>订单信息</span></div>
					<div class="list" style="height: 500px;overflow-y: auto;">
						<div class="row">
							<div class="title">订单状态：</div>
							<div class="value">
								<el-tag size="small" type="success">{{ getState[data.state] }}</el-tag>
							</div>
						</div>
						<div class="row">
							<div class="title">订单编号：</div>
							<div class="value">{{ data.id }}</div>
						</div>
						<div class="row">
							<div class="title">下单时间：</div>
							<div class="value">{{ data.createtime }}</div>
						</div>
						<div class="row">
							<div class="title">订单总额：</div>
							<div class="value">
								<el-tag size="small" type="success">￥{{ data.total_amount }}</el-tag>
							</div>
							<div class="title" style="margin-left: 20px;">商品金额：</div>
							<div class="value">
								<el-tag size="small" type="success">￥{{ data.item_amount }}</el-tag>
							</div>
						</div>
						<div class="row">
							<div class="title">结算总额：</div>
							<div class="value">
								<el-tag size="small" type="success">￥{{ data.js_amount }}</el-tag>
							</div>
						</div>
						<div class="row">
							<div class="title">付款方式：</div>
							<div class="value">{{ data.pay_type == 1 ? '微信支付' : '支付宝支付' }}</div>
						</div>
						<div class="row">
							<div class="title">销售类型：</div>
							<div class="value">
								{{saleType[data.sale_type]}}
							</div>
						</div>
						<div class="row">
							<div class="title">配送方式：</div>
							<div class="value">
								{{delivery[data.delivery_method]}}
							</div>
						</div>
						<div class="row">
							<div class="title">支付时间：</div>
							<div class="value">{{ data.pay_time ? data.pay_time : '未支付' }}</div>
						</div>
						<div class="row">
							<div class="title">买家昵称：</div>
							<div class="value">{{ data.nickname }}</div>
						</div>
						<div class="row">
							<div class="title">{{data.delivery_method==3?'自提':'收货'}}信息：</div>
							<div class="value">{{ $setAddr(data.express_address,data.delivery_method) }}, {{ data.express_receive_name }},
								{{ data.express_phone }}
							</div>
						</div>
						<!-- <div class="row">
							<div class="title">买家留言：</div>
							<div class="value">{{ data.user_remarks ? data.user_remarks : '无' }}</div>
						</div>
						<div class="row">
							<div class="title">商家备注：</div>
							<div class="value">{{ data.admin_remark?data.admin_remark : '无' }}</div>
							<div class="col-xg" @click="openSetComment">修改</div>
						</div> -->
					</div>
				</el-card>
			</div>
			<!-- 物流信息 -->
			<div style="width: 49%;margin-left: 1%;">
				<el-card class="box-card" style="height: 600px;">
					<div slot="header" class="clearfix"><span>物流信息</span></div>
					<div v-if="expressList.length==0||[0,1].includes(data.state)" class="list">
						<div class="row">
							<div class="title">物流类型：</div>
							<div class="value">暂无物流信息</div>
						</div>
					</div>
					<div v-else class="list">
						<el-tabs v-model="activeName" type="card">
							<el-tab-pane v-for="(item,index) in expressList" :key="index" :label="'包裹'+(index+1)"
								:name="(index+1)+''">
								<div style="padding: 20px 10px;">
									<span>物流公司：{{item.express_com_text}}</span>
									<span style="margin-left: 40px;">物流单号：{{item.express_no?item.express_no:'无'}}</span>
								</div>
								<el-timeline style="padding: 15px 60px;height: 380px;overflow: hidden;overflow-y: scroll;">
									<el-timeline-item v-for="(express,index2) in item.content" :key="index2"
										size="large" :color="index2==0?'#1890ff':''">
										<div class="time" style="color: #999;">{{ express.time }}</div>
										<div class="text" style="margin: 10px 0 15px 0;">{{ express.context }}</div>
									</el-timeline-item>
								</el-timeline>
							</el-tab-pane>
						</el-tabs>
					</div>
				</el-card>
			</div>
		</div>
		<div style="width: 99%;margin-top:10px">
			<el-card class="box-card">
				<div slot="header" class="clearfix"><span>商品信息</span></div>
				<div class="">
					<div class="order-title">
						<div class="col" style="width: 12%;">商品</div>
						<div class="col" style="width: 8%;">单价（元）</div>
						<div class="col" style="width: 8%;">数量（件）</div>
						<div class="col" style="width: 12%;">小计（元）</div>
					</div>
					<table border="1" cellspacing="0" style="text-align: center;width: 100%">
						<tr v-for="(good, goodIndex) in list" :key="goodIndex">
							<td rowspan="1" style="width: 10%;">
								<div class="col" style="display: flex;justify-content: flex-start;">
									<div class="good-img" style="flex-shrink: 0;"><img :src="good.image_center"></div>
									<div style="text-align: start;">
										<div class="name">{{ good.product_name }}</div>
										<div v-if="good.sku_text"
											style="display: flex;align-items: center;margin-top: 10px;">
											<div class="name" style="font-weight: 600;">{{ good.sku_text }}</div>
										</div>
									</div>
								</div>
							</td>
							<td rowspan="1" style="width: 8%;">
								<div class="col">
									<div class="price">{{ good.sell_price }}</div>
								</div>
							</td>
							<td rowspan="1" style="width: 8%;">
								<div class="number">{{ good.nums }}</div>
							</td>
							<td v-if="goodIndex == 0" :rowspan="list.length" style="width: 10%;">
								<div class="col">{{ data.total_amount }}</div>
							</td>
						</tr>
					</table>
					<div class=""
						style="width: 100%;display: flex;justify-content: flex-end;font-size: 15px;color: #999999;">
						<div class="" style="display: flex;padding: 10px 20px;">
							<div>买家付款：</div>
							<div v-if="data.pay_state == 2" style="color: #55BD47">
								已付款({{ data.pay_type == 1 ? '微信支付' : '支付宝支付' }})</div>
							<div v-else style="color: #55BD47">未付款</div>
						</div>
					</div>
				</div>
			</el-card>
		</div>

	</div>
</template>

<script>
	import Api from '@/api/pages/mall/order'
	export default {
		data() {
			return {
				centerDialogVisible4: false,
				activeName: '1',
				id: '',
				data: '',
				list: '',
				getState: {
					0: '未支付',
					1: '待发货',
					2: '已发货',
					3: '已完成',
					4: '已关闭',
					5: '退款中',
					6: '待成团',
					7: '待完成'
				},
				delivery: {
					1: '快递',
					2: '自配送',
					3: '自提',
					4: '无需配送',
				},
				saleType: {
					1: '到店服务',
					2: '到家服务'
				},
				Comment: '',
				expressList: [],
			}
		},
		created() {
			this.id = this.$route.query.id
			this.getInfo()
			this.getOrderExpress();
		},
		methods: {
			back() {
				if (this.$route.query.type == 1) {
					this.$router.push({
						path: '/mall/orderList'
					})
				} else {
					this.$router.push({
						path: '/mall/chargebackList'
					})
				}
			},

			getInfo() {
				Api.getOrderDetail({
					id: this.id
				}).then(res => {
					if (res.state) {
						this.data = res.data.order
						this.list = res.data.item_list
					}
				})
			},
			
			// 查看物流
			getOrderExpress() {
				Api.orderExpress({
					order_id: this.id,
					type: 0
				}).then(res => {
					if (res.state) {
						(res.data||[]).map(item=>{
							item.content = JSON.parse(item.content);
							return item;
						})
						this.expressList = res.data
					}
				})
			}
			
		}
	}
</script>
<style lang="scss" scoped>
	.list {
		font-size: 14px;
		color: #666666;

		.row {
			margin: 15px 0;
			display: flex;

			.title {
				flex-shrink: 0;
				line-height: 22px;
			}

			.value {
				line-height: 22px;
			}

			.col-xg {
				line-height: 22px;
				margin-left: 10px;
				color: #337ab7;
				cursor: pointer;
			}
		}
	}

	.col-xg {
		line-height: 22px;
		margin-left: 10px;
		color: #337ab7;
		cursor: pointer;
	}

	.good-img {
		width: 80px;
		height: 80px;
		margin-right: 10px;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.order-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 40px;
		background-color: #eee;
		font-size: 14px;
		color: #666;
		padding: 0 20px;
	}

	td,
	tr,
	table {
		border: 1px #eee solid;
		font-size: 14px;
	}

	td {
		padding: 10px;
	}

	.state-div {
		padding: 30px 30px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.list-div {
			position: relative;
			z-index: 999;
			width: 100%;
			display: flex;
			justify-content: space-between;

			.row {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 14px;

				.state-name {
					color: #999;
				}

				.state-index {
					color: #ffffff;
					width: 30px;
					height: 30px;
					border-radius: 50%;
					background-color: #ccc;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 10px 0;
				}

				.state-time {
					color: #ccc;
					font-size: 14px;
				}
			}

			.row-active {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 14px;

				.state-name {
					color: #13ce66;
				}

				.state-index {
					color: #ffffff;
					width: 30px;
					height: 30px;
					border-radius: 50%;
					background-color: #13ce66;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 10px 0;
				}

				.state-time {
					color: #ccc;
					font-size: 14px;
				}
			}
		}

		.xu-xian {
			position: relative;
			top: -41px;
			width: 75%;
			border-bottom: 1px #999 dashed;
		}
	}
</style>
